//页面弹框封装
<template>
  <el-dialog :title='title' 
             :visible.sync="showDialogVisible" 
             :width="dialogWidths+'%'" 
             :close-on-click-modal='false'
             @close='closeDialog'>
    <span><slot name="contentList"></slot></span>
    <span slot="footer" class="dialog-footer">
        <el-button @click="cancelCloseDialog">取 消</el-button>
        <el-button type="primary" @click="sureCloseDialog">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  
  export default {
    name:'DialogMain',
    props:{
        title:{
            type:String,
            default:'提示'
        },
        showDialogVisible:{
            type:Boolean,
            default:false
        },
        dialogWidths:{
            type:Number,
            default:30
        }
    },
    methods:{
      cancelCloseDialog(){
        //父子传递 子组件不能直接修改props中的值 所以一会你要注意
        this.$emit('cancelDialogVisible');
      },
      sureCloseDialog(){
        this.$emit('sureDialogVisible');
      },
      closeDialog(){
        this.$emit('closeDialog');
      }
     
    }
  }
</script>

<style lang="less" scoped>

</style>